<template>
    <div class="box">

        <div class="header">

            <van-search v-model="keyword" show-action placeholder="请输入搜索关键词" @search="onSearch" clearable shape="round">
                <template #left>
                    <van-icon name="arrow-left" size="22" @click="back" />
                </template>
                <template #action>
                    <div @click="onSearch" class="clicksea">搜索</div>
                </template>
            </van-search>
        </div>

        <!-- 内容区 -->
        <div class="content">
            <van-dropdown-menu>
                <van-dropdown-item v-model="value1" :options="option1" />
                <van-dropdown-item v-model="value2" :options="option2" />
            </van-dropdown-menu>

            <van-card v-for="item of list" :key="item.proid" :num="item.issale" :price="item.originprice"
                :desc="item.desc" :title="item.proname" :thumb="item.img2" />
        </div>
    </div>
</template>
<script>
import Vue from 'vue'
import {
    Search,
    Card,
    DropdownMenu,
    DropdownItem
} from 'vant'

import { search } from '@/api/search'


Vue.use(Search)
Vue.use(Card);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);

export default {
    data() {
        return {
            list: [],
            keyword: '',
            value1: 0,
            value2: 'a',
            option1: [
                { text: '全部商品', value: 0 },
                { text: '新款商品', value: 1 },
                { text: '活动商品', value: 2 },
            ],
            option2: [
                { text: '默认排序', value: 'a' },
                { text: '价格升序', value: 'b' },
                { text: '价格降序', value: 'c' },
            ],
        }
    },
    methods: {
        onSearch() {
            search({
                keyword: this.keyword
            }).then(res => {
                // console.log(res.data);
                this.list = res.data
            })
        },
        back() {
            this.$router.back()
        }
    },
    // watch: {
    //     value2() {
    //         if (this.value2 == "b") {
    //             this.list.sort((a, b) => {
    //                 console.log(list);
    //                 return a.originprice - b.originprice
    //             })
    //         }
    //     }
    // },
    mounted() {
        // console.log(this.$route);
        search({
            keyword: this.$route.params.keyword
        }).then(res => {
            // console.log(res.data);
            this.list = res.data
        })
    },
}


</script>
<style scoped>
.van-search {
    padding: 10px 0 10px 5px;
}

.clicksea {
    background: #f66;
    width: 35px;
    text-align: center;
    border-radius: 5px;
    font-size: 14px;
    color: white;
}

.content {
    margin-top: 20px;
}
</style>
